<template>
  <div class="upload-preview" v-loading="loading">
    <viewer :images="images" v-if="messType == 0">
      <template v-for="(src,index) in images">
        <img
          :src="src"
          :key="index"
          :onerror="errorImg"
          style="width: 20%;height: auto;margin: 20px 2.5%;"
        />
      </template>
    </viewer>
    <video id="video" width="70%" style="margin: 80px auto;" controls v-if="messType == 1">
      <source :src="videoSrc" type="video/mp4" />
    </video>
    <audio controls width="70%" id="myaudio" style="margin: 80px auto;" v-if="messType == 2">
      <source :src="audioSrc" type="audio/mpeg" />
    </audio>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    imgDeg: {
      type: Number,
      default: 0
    },
    Show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      type: '',
      downloadUrl: '',
      uploadType: '',
      loading: false,
      // 图片，支持数组
      images: [],
      messType: 0,
      videoSrc: '',
      audioSrc: ''
    };
  },
  watch: {
    Show(e) {
      this.imgDeg = 0;
      if (e) {
        this.previewUrl();
      }
    }
  },
  mounted() {
    this.imgDeg = 0;
  },
  methods: {
    previewUrl() {
      this.images = [];
      this.loading = true;
      this.$http
        .post('/common/ueditor/previewUrl', {
          url: this.data.Url,
          title: this.data.DocTitle
        })
        .then((res) => {
          this.loading = false;
          this.getStatus(res);
        });
    },
    getStatus(data) {
      var imgData = JSON.parse(data.url);
      var statusUrl = imgData.urls.status;
      this.$http.post(statusUrl).then((res) => {
        var type = this.data.DocTitle;
        var url = imgData.urls.preview_oss_gen;
        type = type
          .substring(type.lastIndexOf('.'))
          .split('.')[1]
          .toLowerCase();
        this.messType == 0;
        var status = res.status;
        setTimeout(() => {
          if (status == 1) {
            this.$parent.getPreviewShow();
            this.$message.warning('查看文件已上传，等待转换中');
          } else if (status == 2) {
            if (
              type == 'docx' ||
              type == 'doc' ||
              type == 'txt' ||
              type == 'word' ||
              type == 'pdf' ||
              type == 'xls' ||
              type == 'xlsx' ||
              type == 'ppt' ||
              type == 'pptx' ||
              type == 'rtf'
            ) {
              if (res.args) {
                for (let i = 1; i <= res.args.page_count; i++) {
                  let liUrl = url + '/' + i + '.png';
                  this.images.push(liUrl);
                }
              } else {
                let liUrl = url + '/1.png';
                this.images.push(liUrl);
              }
            } else if (type == 'png' || type == 'jpg' || type == 'jpeg') {
              this.images.push(JSON.parse(data.url).urls.preview);
            } else if (type == 'mp4') {
              this.videoSrc = '';
              this.messType = 1;
              this.videoSrc = JSON.parse(data.url).urls.preview;
            } else if (type == 'mp3') {
              this.audioSrc = '';
              this.messType = 2;
              this.audioSrc = JSON.parse(data.url).urls.preview;
            }
          } else if (status == -1) {
            this.$parent.getPreviewShow();
            this.$message.warning('正在转换中...');
          } else if (status == -2) {
            this.$parent.getPreviewShow();
            this.$message.warning('转化失败，只能下载查看');
          } else if (status == -3) {
            this.$parent.getPreviewShow();
            this.$message.warning('文件不支持转化');
          }
        }, 100);
      });
    },
    getImgDeg(type) {
      if (type == 'undo') {
        this.imgDeg -= 90;
        if (this.imgDeg == 360) {
          this.imgDeg = 0;
        }
      } else if (type == 'redo') {
        this.imgDeg += 90;
        if (this.imgDeg == -360) {
          this.imgDeg = 0;
        }
      }
    },
    setVideo() {
      this.videoSrc = '';
      this.audioSrc = '';
      var myAuto = document.getElementById('myaudio');
      if (myAuto) {
        myAuto.pause();
      }
      this.messType = 0;
    }
  }
};
</script>

<style lang="scss">
.upload-preview {
  margin: 25px;
  height: calc(100% - 50px);
  line-height: 100px;
  text-align: center;
  overflow: auto;
  .upload-preview-rotate {
    position: fixed;
    right: 50px;
    top: 70px;
  }
}
</style>